﻿<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="bootstrap.min.css" rel="stylesheet" />
    <link href="daterangepicker.css" rel="stylesheet" />
    <style>
        .K_datecontrol {
          border:1px solid #ddd;width:240px;
       }
        .K_input{border:0px;border-right:1px solid #ddd;padding:3px;background-color:#eee;}
        .K_input:focus {            
            outline: none;
        } 
        .K_datecontrol .K_icon{color:#555;font-size:12px;cursor:pointer;}   
        .K_icon:hover{color:#f00;}    
    </style>
</head>
<body>
    <div class="container">        
        <div style="margin-top:20px;">
            <div class="K_datecontrol" >
                <input type="text" class="K_input" id="K_ExpiredDate" readonly>
                <input type="hidden" id="ExpiredDate_start" />
                <input type="hidden" id="ExpiredDate_end" />
                <span class="glyphicon glyphicon-remove K_icon" id="K_Clear_Expireddate"></span>
                <span class="glyphicon glyphicon-option-vertical"></span>
                <span class="glyphicon glyphicon-calendar K_icon" id="K_clandar_Expireddate"></span>
            </div>
        </div>
    </div>
    
    <!--<script src="jquery-2.2.1.min.js"></script>-->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="moment.min.js"></script>
    <script src="daterangepicker.js"></script>
    <script type="text/javascript">
	
        
        //$("#startDate").val(Start.format('YYYY-MM-DD'));
        //$("#endtDate").val(End.format('YYYY-MM-DD'));

        //$('#textSerchBookingDate,.K_input').daterangepicker({
        //    //"minDate": seatStart,
        //    "startDate": Start.format("YYYY-MM-DD"),
        //    "endDate": End.format("YYYY-MM-DD"),
        //}, function (start, end, label) {
        //    $("#startDate").val(Start.format('YYYY-MM-DD'));
        //    $("#endtDate").val(End.format('YYYY-MM-DD'));
        //    //$("#seatgetDate").click();
        //});



      
        $('#K_ExpiredDate').daterangepicker({
            //"minDate": seatStart,
            "startDate": moment().format("YYYY-MM-DD"),
            "endDate": moment().add("day", 7).format("YYYY-MM-DD"),
        }, function (start, end, label) {
            $("#ExpiredDate_start").val(start.format('YYYY-MM-DD'));
            $("#ExpiredDate_end").val(end.format('YYYY-MM-DD'));
            //$("#seatgetDate").click();
        });

        $("#K_clandar_Expireddate").click(function () {
            $('#K_ExpiredDate').focus();
        });

        $("#K_Clear_Expireddate").click(function () {
            $('#K_ExpiredDate,#ExpiredDate_start,#ExpiredDate_end').val("");
        });
        $("#K_Clear_Expireddate").click();





        //var start = new Date();
        //$('.js-single-date').daterangepicker({
        //    minDate: start,
        //    singleDatePicker: true,
        //    showDropdowns: true
        //});
    </script>
</body>
</html>
